<template>
  <el-dialog
    v-model="dialogVisible"
    title="企业计费配置"
    width="90%"
    align-center
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @close="handleClose"
  >
    <div class="billing-config-dialog">
      <!-- 企业信息展示 -->
      <div class="enterprise-info">
        <h3>{{ enterpriseInfo.shortName }} - 计费配置</h3>
      </div>

      <!-- 计费配置内容 -->
      <div class="config-content">
        <!-- 计费配置标签页 -->
        <el-tabs v-model="activeName" @tab-click="handleTabClick">
          <el-tab-pane label="房租管理" name="rent">
            <RentInfo ref="rentRef" />
          </el-tab-pane>
          <el-tab-pane label="电表管理" name="ele">
            <ElectricMeterInfo ref="eleRef" />
          </el-tab-pane>
          <el-tab-pane label="水表管理" name="water">
            <WaterMeterInfo ref="waterRef" />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
        <el-button type="primary" @click="handleSave">保存配置</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, watch, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import RentInfo from './RentInfo.vue'
import ElectricMeterInfo from './ElectricMeterInfo.vue'
import WaterMeterInfo from './WaterMeterInfo.vue'

// 弹窗显示状态
const dialogVisible = ref(false)

// 企业信息
const enterpriseInfo = reactive({
  id: null,
  shortName: '',
  currentPeriod: ''
})


// 当前选中的企业ID和租户ID
const currentEnterpriseId = ref(null)
const currentTenantId = ref(null)

// 标签页状态
const activeName = ref('rent')

// 子组件引用
const rentRef = ref(null)
const eleRef = ref(null)
const waterRef = ref(null)

// 监听企业ID变化，更新子组件
watch(() => currentEnterpriseId.value, (newEnterpriseId) => {
  if (newEnterpriseId && dialogVisible.value) {
    updateChildComponents()
  }
})

// 更新子组件数据
const updateChildComponents = () => {
  nextTick(() => {
    if (rentRef.value) {
      rentRef.value.enterpriseId = currentEnterpriseId.value
      rentRef.value.tenantId = currentTenantId.value
    }
    if (eleRef.value) {
      eleRef.value.enterpriseId = currentEnterpriseId.value
      eleRef.value.tenantId = currentTenantId.value
    }
    if (waterRef.value) {
      waterRef.value.enterpriseId = currentEnterpriseId.value
      waterRef.value.tenantId = currentTenantId.value
    }
  })
}


// 处理标签页切换
const handleTabClick = (tab: any) => {
  activeName.value = tab.props.name
  refreshCurrentTab()
}

// 刷新当前标签页的数据
const refreshCurrentTab = () => {
  if (!currentEnterpriseId.value) return
  
  nextTick(() => {
    if (activeName.value === 'rent' && rentRef.value) {
      rentRef.value.getList()
    } else if (activeName.value === 'ele' && eleRef.value) {
      eleRef.value.getList()
    } else if (activeName.value === 'water' && waterRef.value) {
      waterRef.value.getList()
    }
  })
}

// 打开弹窗
const openDialog = (enterpriseData: any) => {
  // 设置企业信息
  enterpriseInfo.id = enterpriseData.id
  enterpriseInfo.shortName = enterpriseData.shortName
  enterpriseInfo.currentPeriod = enterpriseData.currentPeriod || ''
  
  // 显示弹窗
  dialogVisible.value = true
  
  // 延迟设置当前企业，确保组件已渲染
  nextTick(() => {
    currentEnterpriseId.value = enterpriseData.id
    currentTenantId.value = enterpriseData.tenantId || 1 // 默认租户ID
    updateChildComponents()
  })
}

// 关闭弹窗
const handleClose = () => {
  dialogVisible.value = false
  // 重置数据
  currentEnterpriseId.value = null
  currentTenantId.value = null
  activeName.value = 'rent'
}

// 保存配置
const handleSave = () => {
  ElMessage.success('配置保存成功！')
  handleClose()
}

// 暴露方法给父组件
defineExpose({
  openDialog
})
</script>

<style lang="scss" scoped>
.billing-config-dialog {
  height: 70vh;
  display: flex;
  flex-direction: column;
}

.enterprise-info {
  margin-bottom: 20px;
  padding: 15px;
  background: #f5f7fa;
  border-radius: 4px;
  
  h3 {
    margin: 0 0 8px 0;
    color: #303133;
    font-size: 18px;
    font-weight: 600;
  }
}

.config-content {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  
  :deep(.el-tabs) {
    height: 100%;
    display: flex;
    flex-direction: column;
    
    .el-tabs__content {
      flex: 1;
      overflow: hidden;
      
      .el-tab-pane {
        height: 100%;
        overflow: auto;
      }
    }
  }
}


.dialog-footer {
  text-align: right;
}

// 滚动条样式
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-thumb {
  background-color: #dcdfe6;
  border-radius: 3px;
  
  &:hover {
    background-color: #c0c4cc;
  }
}

::-webkit-scrollbar-track {
  background-color: #f5f7fa;
  border-radius: 3px;
}
</style>
